<template>
	<view class="pages-home" v-if="isLoad">
		<image mode="widthFix" lazy-load class="service-page-bg abs" src="/static/bg.png"></image>
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view style="height:50rpx"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view style="height:80rpx"></view>
		<!-- #endif -->

		<!-- <view @tap.stop="$util.goUrl({url: `/pages/technician`,openType: `reLaunch`})"
			class="service-search flex-between fill-base ml-lg radius rel">
			<view class="flex-y-center">
				<i class="iconfont iconsousuo c-title mr-md"></i>
				<view class="f-desc">{{configInfo.index_type == 1 ? `搜索服务名称` : `搜索体验官姓名`}} </view>
			</view>
			<view class="btn flex-center f-desc c-base radius" :style="{background:primaryColor}">搜索</view>
		</view> -->
		<view class="ml-lg mr-lg">
			<search @input="toSearch" type="input" :keyword="searchName" :padding="6" :iconLeft="false"
				style="position: absolute;width: calc(100% - 60rpx);" :radius="50" frontColor="#fff"
				:placeholder="configInfo.index_type == 1 ? `搜索服务名称` : `搜索体验官姓名`">
			</search>
			<view class="" style="height: 76rpx;"></view>
		</view>


		<view class="mt-md rel" v-if="banner.length > 0">
			<banner @change="goBanner" :list="banner" :height="193" :margin="0" :autoplay="true" :previousMargin="0"
				:nextMargin="0" :indicatorActiveColor="primaryColor" :dotWidth="20" :dotBottom="5" :borderRadius="30"
				:widthRL="30">
			</banner>
		</view>
		<view class="pt-lg pl-lg pr-lg flex-between module">
			<view class="rel" @tap="toApply(1)" style="width:354rpx;">
				<image class="wizard" src="https://lbqny.migugu.com/admin/playwith/service/01.png" mode="aspectFill">
				</image>
				<text class="c-base f-sm-title abs wizard-title">体验官入驻</text>
			</view>
			<view class="">
				<view class="rel" @tap="$util.toCheckLogin({url: `/business/pages/settle-in`})">
					<image class="business" src="https://lbqny.migugu.com/admin/playwith/service/02.png"
						mode="aspectFill"></image>
					<text class="c-base f-sm-title abs business-title">商家入驻</text>
				</view>
				<view class="mt-md rel" style="width:356rpx;"
					@tap="$util.toCheckLogin({url: `/technician/pages/join-us`})">
					<image class="join" src="https://lbqny.migugu.com/admin/playwith/service/03.png" mode="aspectFill">
					</image>
					<text class="c-base f-sm-title abs join-title">合作加盟</text>
				</view>
			</view>
		</view>
		<view class="pt-lg pl-lg pr-lg pb-lg rel " v-if="configInfo.index_type == 1">
			<view class="flex-between pb-md">
				<view class="f-title c-base text-bold" style="z-index: 1;">新奇玩法</view>
			</view>
			<view @tap.stop="goDetail(index)" class="list-item flex-center pd-md fill-base rel radius-20 mb-md"
				v-for="(item, index) in list.data" :key="index">
				<!-- #ifdef H5 -->
				<view class="cover radius-16">
					<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.cover}')`}">
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
				<!-- #endif -->

				<view class="flex-between flex-1 rel c-base">
					<view class="flex-1 pl-md">
						<view class="flex-1 flex" style="justify-content: space-between;align-items:flex-start">
							<view class="f-mini-title max-330 ellipsis">{{item.title}}</view>
							<view class="flex-y-center">
								<i class="iconfont iconwode2 icon-font-color" style="font-size: 22rpx;"></i>
								<text class="f-icontext c-desc">{{item.total_sale}}人玩过</text>
							</view>
						</view>
						<view class="pt-sm max-330 ellipsis f-caption c-caption">{{item.sub_title}}</view>
						<view class="flex-y-center pt-md">
							<view class="flex-center">
								<!-- <image src="/static/images/time.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image> -->
								<i class="iconfont iconshijian2" :style="{color:primaryColor}"></i>
								<view class="flex-center" style="padding-left: 4rpx;">
									<text class="f-desc text-bold">{{item.time_long}}</text>
									<text class="f-icontext">分钟</text>
								</view>
							</view>
							<view class="flex-center pl-sm">
								<text style="color: rgba(255, 18, 130, 1);" class="f-caption">￥</text>
								<text style="color: rgba(255, 18, 130, 1);" class="f-mini-title text-bold">{{item.price}}</text>
							</view>
							<text class="f-icontext c-caption pl-sm"
								style="text-decoration: line-through">￥{{item.init_price}}</text>
						</view>
					</view>
					<view class="abs" style="right: 0rpx;">
						<view @tap.stop="toChoose(index)" class="f-desc c-base item-btn flex-center fill-btn">下单</view>
					</view>
				</view>
				<!-- <view class="flex-1 ml-md" style="max-width: 510rpx;">
					<view class="flex-between">
						<view class="f-title c-title text-bold ellipsis max-300">{{ item.title }}</view>
						<view class="flex-y-center f-caption c-caption">
							<view class="c-title" :style="{color:primaryColor}">{{ item.total_sale }}</view>人选择
						</view>
					</view>
					<view class="pt-sm f-caption c-caption ellipsis max-400">{{item.sub_title}}</view>
					<view class="flex-between mt-sm">
						<view class="f-caption c-caption">
							<view class="flex-center"><i class="iconfont iconshijian mr-sm"
									style="font-size: 26rpx;margin-left:-4rpx" :style="{color:primaryColor}"></i>
								<view class="flex-center">
									<view class="f-paragraph c-title text-bold">{{ item.time_long }}</view>
									分钟
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between mt-sm">
						<view class="flex-y-center">
							<view class="flex-center f-paragraph mr-sm" :style="{color:primaryColor}">¥<view
									class="f-md-title text-bold">
									{{ item.price }}
								</view>
							</view>
							<view class="text-delete f-title" v-if="item.init_price">¥{{ item.init_price }}</view>
						</view>
						<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose(index)" style="width:140rpx;">
							<view class="item-btn flex-center f-caption c-base radius"
								:style="{ background: primaryColor }">
								选择体验官
							</view>
						</auth>
					</view>
				</view> -->
			</view>
		</view>
		<view class="pl-lg pr-lg pt-lg" v-else>
			<view class="flex-between pb-md">
				<view class="f-title c-black text-bold" style="z-index: 1;">明星体验官</view>
			</view>
			<view class="flex-warp" v-if="recommend_list && recommend_list.data.length > 0">
				<view class="mb-md" :style="{marginRight: index%2 == 0 ? '20rpx':''}"
					v-for="(item,index) in recommend_list.data" :key="index">
					<technician-list-item @workImg="toPreviewImage(index,1)" @selfImg="toPreviewImage(index)"
						@comment="toShowPopup(index,'message')" @collect="toCollect(index)" @info="goInfo(index)"
						@order="toShowPopup(index,'technician', item.is_work )" :info="item">
					</technician-list-item>
				</view>
				<abnor v-if="recommend_list.data.length == 0"></abnor>
			</view>
		</view>

		<load-more :noMore="list.current_page >= list.last_page && list.data.length > 0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor>

		<!-- <abnor v-if="recommend_list.data.length <= 0 && recommend_list.current_page == 1"></abnor> -->

		<view class="space-footer"></view>


		<uni-popup ref="coupon_item" type="center" :maskClick="false">
			<view class="coupon-popup f_r_c_c">
				<!-- #ifdef H5 -->
				<view class="h5-image bg-img"
					:style="{ backgroundImage : `url('https://lbqnyv2.migugu.com/bianzu3.png')`}">
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" lazy-load class="bg-img" src="https://lbqnyv2.migugu.com/bianzu3.png"></image>
				<!-- #endif -->

				<i @tap.stop="$refs.coupon_item.close()" class="iconfont icon-close c-base"></i>
				</image>
				<view class="coupon-info f_c_m_c">
					<view class="tops f_c_m_c">
						<view class="">
							成功领取
						</view>
						<view class="">
							卡券将放入“我的-我的卡券”
						</view>
					</view>
					<view class="lists f_r_c_c">
						<scroll-view scroll-y style="width: 420rpx;height:100%;">
							<view class="list f_r_sb_c" v-for="(item, index) in couponList" :key="index">
								<image src="https://lbqny.migugu.com/admin/anmo/coupon/coupon.png" mode="aspectFill">
								</image>
								<view class="f_r_sb_c">
									<view class="f_c_m_c">
										<view class="price">
											{{item.discount}}
										</view>
										<view class="price_text">
											{{item.full*1>0?`满${item.full}可用`:`立减`}}
										</view>
									</view>
									<view class="title f_r_m_c">
										<view class="ellipsis-3">
											{{item.title}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="btns f_r_c_c" @tap.stop="userGetCoupon">
					<view class="f_r_c_c">
						领取到卡包
					</view>
				</view>
			</view>
		</uni-popup>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="1"></tabbar>

		<!-- #ifdef APP-PLUS -->
		<login-info></login-info>
		<!-- #endif -->
	</view>
</template>

<script>
	let play = null
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	import technicianListItem from "@/components/technician-list-item.vue"
	export default {
		components: {
			tabbar,
			technicianListItem
		},
		data() {
			return {
				couponList: [], //优惠券
				isLoad: false,
				options: {},
				loading: true,
				lockTap: false,
				searchName: ''
				//banner: ['https://lbqny.migugu.com/admin/playwith/service/banner.png']
			}
		},
		computed: mapState({
			pageActive: state => state.service.pageActive,
			activeIndex: state => state.service.activeIndex,
			tabList: state => state.service.tabList,
			param: state => state.service.param,
			indexParam: state => state.service.indexParam,
			list: state => state.service.list,
			banner: state => state.service.banner,
			recommend_list: state => state.service.recommend_list,
			recommend_style: state => state.service.recommend_style,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			autograph: state => state.user.autograph,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
			isGzhLogin: state => state.user.isGzhLogin,
			haveShieldOper: state => state.user.haveShieldOper,
			mineInfo: state => state.user.mineInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			options = await this.updateCommonOptions(options)
			this.options = options
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#000000'
			})
			uni.onNetworkStatusChange((res) => {
				let {
					isConnected
				} = res
				if (isConnected && !this.pageActive) {
					this.initIndex()
					return
				}
			})
			await this.initIndex()
		},
		async onShow() {
			// #ifdef H5
			if (this.$jweixin.isWechat()) {
				await this.$jweixin.initJssdk();
				this.toAppShare()
			}
			// #endif
			if (this.haveShieldOper == 2) {
				this.initIndex()
				this.updateUserItem({
					key: 'haveShieldOper',
					val: 0
				})
			}
			if (this.pageActive && this.userInfo.id) {
				this.getCouponList()
			}
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			let param = this.$util.deepCopy(this.param)
			param.name = ''
			await this.updateServiceItem({
				key: 'param',
				val: param
			})
			this.searchName = ''
			let indexParam = this.$util.deepCopy(this.indexParam)
			indexParam.page = 1
			this.updateServiceItem({
				key: 'indexParam',
				val: indexParam
			})
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {
			if (this.configInfo.index_type == 1) {
				if (this.list.current_page >= this.list.last_page || this.loading) return;
				this.loading = true;
				this.getList(this.param.page + 1);
			} else {
				if (this.recommend_list.current_page >= this.recommend_list.last_page) return;
				this.$util.showLoading()
				let indexParam = this.$util.deepCopy(this.indexParam)
				indexParam.page = indexParam.page + 1
				this.updateServiceItem({
					key: 'indexParam',
					val: indexParam
				})
				let {
					lng = 0,
						lat = 0
				} = this.location
				await this.getServiceIndex({
					lat,
					lng,
					name: this.searchName,
					page: indexParam.page,
					limit: indexParam.limit
				})

				this.$util.hideAll()
			}
		},
		onShareAppMessage(e) {
			let {
				id: pid = 0
			} = this.userInfo
			let path = `/pages/service?pid=${pid}`
			this.$util.log(path)
			return {
				title: '',
				imageUrl: '',
				path,
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'updateCommonOptions', 'getServiceIndex', 'getServiceList',
				'getMineInfo'
			]),
			...mapMutations(['updateServiceItem', 'updateTechnicianItem', 'updateUserItem']),
			async initIndex(refresh = false) {
				let {
					pid = 0,
						channel_id = 0
				} = this.options
				if (!refresh && this.pageActive && (!pid || !channel_id)) {
					this.isLoad = true
					this.loading = false
					this.$util.hideAll()
					return
				}

				let {
					isGzhLogin
				} = this
				let {
					id: uid = 0
				} = this.userInfo
				if ((pid || channel_id) && !uid) {
					// #ifdef H5
					if (isGzhLogin) {
						setTimeout(() => {
							this.getUserInfo()
						}, 1000)
					} else {
						this.getUserInfo()
					}
					// #endif
					// #ifndef H5
					await this.getUserInfo()
					// #endif 
				}

				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}

				let {
					location
				} = this
				let {
					plugAuth = {}
				} = this.configInfo
				let {
					recommend = false
				} = plugAuth

				if (recommend && !location.lat) {
					// #ifdef H5
					if (this.$jweixin.isWechat()) {
						this.$util.showLoading()
						// await this.$jweixin.initJssdk();
						await this.$jweixin.wxReady2();
						let {
							latitude: lat = 0,
							longitude: lng = 0
						} = await this.$jweixin.getWxLocation()
						location = {
							lng,
							lat,
							address: '定位失败',
							province: '',
							city: '',
							district: ''
						}
					}
					// #endif
					// #ifndef H5
					location = await this.$util.getBmapLocation()
					// #endif
					this.updateUserItem({
						key: 'location',
						val: location
					})
				}
				let {
					lng = 0,
						lat = 0
				} = location

				await this.getServiceIndex({
					lat,
					lng,
					page: this.indexParam.page,
					limit: this.indexParam.limit
				})
				this.updateServiceItem({
					key: 'pageActive',
					val: true
				})
				this.isLoad = true
				if (this.userInfo.id) {
					await Promise.all([this.getList(1), this.getCouponList()])
				} else {
					await this.getList(1)
				}
				this.getMineInfo()
			},
			initRefresh() {
				this.initIndex(true)
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let title = '首页'
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/pages/service?pid=${pid}`
				let imageUrl = ''
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, '', href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
			},
			// 轮播图/广告图跳转
			goBanner(e) {
				// connect_type 1查看大图，2文章
				let {
					connect_type,
					type_id: id = 0,
					img: current
				} = e
				switch (connect_type) {
					case 1:
						this.$util.previewImage({
							current,
							urls: [current]
						})
						break;
					case 2:
						this.$util.goUrl({
							url: `/user/pages/article?id=${id}`
						})
						break;
				}
			},
			async userGetCoupon() {
				let ids = []
				this.couponList.forEach(v => {
					ids.push(v.id)
				})
				let res = await this.$api.service.userGetCoupon({
					coupon_id: ids
				})
				this.$util.showToast({
					title: `领取成功`
				})
				setTimeout(() => {
					this.$util.goUrl({
						url: '/user/pages/coupon/list'
					})
				}, 1000)
				this.$refs.coupon_item.close()
				this.loading = false
				this.$util.hideAll()
			},
			async getCouponList() {
				let list = await this.$api.service.couponList()
				this.couponList = list
				if (list.length > 0 && this.isLoad) {
					this.$refs.coupon_item.open()
				}
				this.loading = false
				this.$util.hideAll()
			},
			async getList(page = 0) {
				if (page) {
					let param = this.$util.deepCopy(this.param)
					param.page = page
					this.updateServiceItem({
						key: 'param',
						val: param
					})
				}
				let {
					list: oldList,
					param,
					tabList,
					activeIndex
				} = this
				let {
					sort,
					sign
				} = tabList[activeIndex]
				let desc = activeIndex == 0 || sign == 1 ? '' : 'desc'
				param.sort = `${sort} ${desc}`
				await this.getServiceList(param)
				this.loading = false
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.updateServiceItem({
					key: 'activeIndex',
					val: index
				})
				let tabList = this.$util.deepCopy(this.tabList)
				let {
					is_sign,
					sign,
				} = tabList[index];
				if (is_sign) {
					tabList[index].sign = sign == 0 ? 1 : 0;
				}
				this.updateServiceItem({
					key: 'tabList',
					val: tabList
				})
				this.$util.showLoading()
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1)
			},
			// 详情
			goDetail(index) {
				let {
					id
				} = this.list.data[index]
				let url = `/user/pages/detail?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			// 选择体验官
			toChoose(index) {
				let {
					id
				} = this.list.data[index]
				let url = `/user/pages/choose-technician?id=${id}`
				this.$util.toCheckLogin({
					url
				})
			},
			toTechnician(index) {
				let {
					id,
					city_id,
					coach_name
				} = this.recommend_list.data[index]
				this.updateTechnicianItem({
					key: 'pageActive',
					val: false
				})
				this.$util.goUrl({
					url: `/pages/technician?coach_id=${id}&coach_name=${coach_name}&city_id=${city_id}`,
					openType: `reLaunch`
				})
			},
			toPreviewImage(index, key = 0) {
				let {
					self_img: urls,
					work_img
				} = this.recommend_list.data[index]
				if (key) {
					urls = [work_img]
				}
				this.$util.previewImage({
					current: urls[0],
					urls
				})
			},
			// 体验官详情
			goInfo(index) {
				let {
					id,
					store = {}
				} = this.recommend_list.data[index]
				let {
					plugAuth = {}
				} = this.configInfo
				this.$util.toCheckLogin({
					url: plugAuth.store && store && store.id ? `/shopstore/pages/detail?id=${store.id}` :
						`/user/pages/technician-info?id=${id}`
				})
			},
			toSearch(e) {
				console.log(e, this.searchName)
				clearTimeout(play)
				this.searchName = e
				play = setTimeout(async () => {
					if (this.configInfo.index_type == 2) { // 明星体验官
						this.$util.showLoading()
						let {
							lng = 0,
								lat = 0
						} = this.location
						await this.getServiceIndex({
							lat,
							lng,
							name: e,
							page: this.indexParam.page,
							limit: this.indexParam.limit
						})

						this.$util.hideAll()
					} else {
						this.$util.showLoading()
						let param = this.$util.deepCopy(this.param)
						param.name = e
						this.updateServiceItem({
							key: 'param',
							val: param
						})
						this.getList(1);
					}
				}, 1000)
			},
			// 申请体验官/分销商/渠道商
			async toApply(type) {
				let {
					coach_status = -1,
						fx_status = -1,
						channel_status = -1
				} = this.mineInfo
				let status = type == 1 ? coach_status : type == 2 ? fx_status :
					channel_status
				let page = {
					1: `/technician/pages/apply`,
					2: `/user/pages/distribution/apply`,
					3: `/user/pages/channel/apply`
				}
				// -1未申请，1审核中，2审核通过，3取消授权，4审核失败
				let url = status == -1 ? page[type] :
					`/user/pages/apply-result?type=${type}`
				this.$util.log(url)
				this.$util.toCheckLogin({
					url
				})
			},
		}
	}
</script>


<style lang="scss">
	/deep/ .search-box {
		background: rgba(81, 29, 111, .5) !important;
		.iconfont{
			color: #fff;
		}
		.search-item {
			background: transparent !important;
		}
	}

	.pages-home {
		.service-page-bg {
			width: 750rpx;
			// height: 739rpx;
			height: 735rpx;
			/* #ifdef H5 */
			z-index: 0;
			/* #endif */
			/* #ifndef H5 */
			z-index: -1;
			/* #endif */
			left: 0;
		}

		.service-bg {
			width: 750rpx;
			height: 100%;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
			/* #ifdef H5 */
			z-index: 0;
			/* #endif */
			/* #ifndef H5 */
			z-index: -1;
			/* #endif */
		}

		.service-search {
			width: 690rpx;
			height: 70rpx;
			padding: 0 4rpx 0 30rpx;

			.flex-y-center {
				.f-desc {
					color: #C7C7C7;
				}
			}

			.btn {
				width: 106rpx;
				height: 62rpx;
			}
		}

		.recommend-technician {
			white-space: nowrap;
			width: 650rpx;

			.recommend-item {
				display: inline-block;
			}

			.recommend-item.type-1 {
				width: 225rpx;
				height: 151rpx;
				border-radius: 12rpx;
				margin-left: 20rpx;

				.cover {
					width: 70rpx;
					height: 70rpx;
					border-radius: 35rpx;
				}

				.ellipsis {
					max-width: 120rpx;
				}

				.iconpingfen1 {
					font-size: 20rpx;
					background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
				}

				.star-text {
					height: 26rpx;
					color: #FF9519;
					margin-left: 6rpx;
				}

				.new-tag {
					width: 67rpx;
					height: 30rpx;
					transform: rotateZ(360deg);
					border-radius: 4rpx;
				}

				.new-text {
					height: 30rpx;
					color: #050505
				}
			}

			.recommend-item:nth-child(1) {
				margin-left: 0;
			}

			.recommend-item.type-1:nth-child(3n-2) {
				background: linear-gradient(139deg, #DAF4FF 0%, #E4F1FF 100%);
			}

			.recommend-item.type-1:nth-child(3n-1) {
				background: linear-gradient(139deg, #F0DAFF 0%, #FFE4E4 100%);
			}

			.recommend-item.type-1:nth-child(3n) {
				background: linear-gradient(139deg, #FFEBDA 0%, #FFE4E4 100%);
			}
		}
	}

	.coupon-popup {
		width: 658rpx;
		height: 865rpx;
		position: relative;

		.bg-img {
			width: 100%;
			height: 100%;
		}

		.icon-close {
			font-size: 60rpx;
			position: absolute;
			top: 50rpx;
			right: 60rpx;
			z-index: 999;
		}

		.coupon-info {
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: 0;
			left: 0;

			.tops {
				width: 480rpx;
				color: #FB4523;
				position: absolute;
				top: 260rpx;

				>view:nth-child(1) {
					font-weight: bold;
					font-size: 30rpx;
				}
			}

			.lists {
				width: 500rpx;
				height: 300rpx;
				padding: 10rpx;
				overflow-x: hidden;
				position: absolute;
				bottom: 222rpx;

				.list {
					width: 420rpx;
					height: 130rpx;
					margin-bottom: 10rpx;
					margin-top: 5rpx;
					position: relative;

					>image {
						width: 100%;
						height: 100%;
					}

					>view {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 8rpx;

						>view:nth-child(1) {
							width: 38%;
						}

						>view:nth-child(2) {
							display: flex;
							justify-content: center;
							flex: 1;
							padding: 0 15rpx;
							box-sizing: border-box;
						}

						.price {
							font-size: 30rpx;
							color: #FB4523;
						}

						.title {
							font-size: 30rpx;
							line-height: 36rpx;
							font-weight: bold;
						}

						.price_text {
							color: #ccc;
						}
					}
				}
			}

		}

		view.btns {
			width: 100%;
			position: absolute;
			height: 82rpx;
			bottom: 0rpx;
			left: 0;

			>view {
				width: 422rpx;
				height: 82rpx;

				border-radius: 40rpx;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}
	}

	.module {
		.wizard {
			width: 354rpx;
			height: 260rpx;
		}

		.business {
			width: 336rpx;
			height: 120rpx;
		}

		.join {
			width: 356rpx;
			height: 120rpx;
			margin-left: -20rpx;
		}

		.wizard-title {
			top: 28rpx;
			left: 28rpx;
		}

		.business-title,
		.join-title {
			top: 22rpx;
			left: 40rpx;
		}
	}

	.list-item {
		.cover {
			// width: 180rpx;
			// height: 204rpx;
			width: 150rpx;
			height: 150rpx;
		}


		.text-delete {
			color: #B9B9B9;
		}

		// .item-btn {
		// 	width: 140rpx;
		// 	height: 52rpx;
		// }
		.iconwode2 {
			background-image: linear-gradient(#9FA4B6, #BFC5CF);
		}

		.item-btn {
			width: 120rpx;
			height: 60rpx;
			border-radius: 60rpx;
		}
	}
</style>